/**
 * 子团队主页面
 * @param gameId 子团队ID
 * @param gameTitle 团队赛名称
 */
<template lang="html">
  <div class="detail">
    <team-header :title="gameTitle" hasShare v-on:onShare="onShare"></team-header>
    <!-- <img
      class="plq"
      src="../../assets/images/pinglunqu.png" alt="" v-if="gameStep!==0" > -->
    <div class="group_con" :style='{backgroundImage: winBg}'>
      <div class="con_top">
        <div class="group_name">
          {{ teamDetail.GAME_NAME }}
        </div>

        <div class="group_earnings" v-if="gameStep === 3 || gameStep === 4">
          <p :style="profitStyle(teamDetail.avgProfit || teamDetail.TOTAL_PROFIT)">
            {{ (teamDetail.avgProfit || teamDetail.TOTAL_PROFIT) | toFix(2) }}
          </p>
          <p>团队累计平均收益率</p>
          <p>更新时间：{{ profitUpdateTime }}</p>
        </div>

        <!-- <div class="countdown" v-else>
            <p>开赛倒计时</p>
            <div class="time">
              <template v-if="showDay">
                <span class="leaveDays">距开赛还有{{days}}天</span>
              </template>
              <template v-else>
                <span>{{hours}}</span>
                <span>{{minute}}</span>
                <span>{{second}}</span>
              </template>
            </div>
        </div> -->

      </div>
      <div class="con_bot">
        <div class="group_detail">
          <template v-for="(item,index) in teamInfo">
            <div class="detail_list">
              <img :src="teamInfoBg(index)" alt="">
              <div>
                <p>{{item[0]}}</p>
                <p
                  v-show="item[0] === '空仓率'"
                  style="font-size: 10px; line-height: 11px; margin: 0;">(T-1数据)</p>
                <p>{{item[1]}}</p>
              </div>
            </div>

          </template>
        </div>
      </div>

    </div>

    <div class="applied" v-show="hasChecked && isAttend">
      <div class="myRank">
        <div class="myRank_con">
          <p>已报名</p>
          <span>
            我的排名: {{ myRankInfo.ranknum > 0 ? myRankInfo.ranknum : '-' }}
          </span>
        </div>
        <span class="back_ground" @click="backToSquare" v-show="isSpecial">
          回广场
          <i class="iconfont ">&#xe62e;</i>
        </span>
      </div>
      <div class="dealAndStock" v-show="gameStep === 3">
        <!-- <div :class="{'game_over': gameStep === 4, 'gaming':  gameStep === 3 }" v-text="gameStep === 4 ? '比赛结束': '比赛交易'">
          比赛交易
        </div> -->
        <div class="gaming" @click="gotoTrade">
          比赛交易
        </div>
        <div class="stock" @click="gotoStock">
          查比赛持仓
        </div>
      </div>
    </div>
    <!-- <p class='sign_up' v-if = "gameStep === 0 || gameStep === 1 || gameStep === 2" v-text="gameStep !== 0 ? gameStep === 1 ? '报名中' : '未开赛': '报名该队' "></p> -->

    <p
      v-show="hasChecked && gameStep === 4"
      class="end">比赛已结束</p>

    <p
      v-show="hasChecked && gameStep === 0"
      class="sign_up">比赛未开始</p>

    <p
      v-show="hasChecked && gameStep === 3 && !hasAttended && !isAttend"
      class="sign_up"
      @click="attendGame">报名该队</p>

    <!-- <p
      :class="['sign_up', {'end': gameStep === 4}]"
      v-text="buttonText"
      v-show="!isAttend && hasChecked"
      @click="attendGame"></p> -->

    <div class="skeleton" v-show="!hasChecked">
      <img src="~assets/images/loading.gif" alt="">
    </div>

    <new-msg
      v-if="gameStep === 3"
      ref="newMsg"
      style="backgroundColor: #fff;"
      @click="onComment"></new-msg>

    <div class="tab_wrap">
      <div class="tab">
        <span @click="showAllList">总榜单</span>
        <span @click="showWeekList">周榜单</span>
        <div class="tab_background" ref='tabBC'></div>
      </div>
      <p class="hint">注：已调仓成功的用户才能上榜哦~</p>
    </div>
    <group-list
      ref="grouplist"
      :gameStep="gameStep"
      :gameTitle="gameTitle"
      :isLoading="isRankLoading"
      :showTotal="showTotal"
      :rankList="rankList"
      :gameDetail="teamDetail"
      :isAttend="isAttend"
      v-on:loadmore="showMoreList"/>

    <game-pwd-input-modal v-on:success="registerSuccess"/>

    <img src="~assets/images/pinglunqu.png"
      class="comment-icon" v-if="canComment" @click="onComment">
    <img src="~assets/images/jingcai.png" class="comment-icon" v-else @click="onComment">
    <div class="comment-box">
      <speak ref="speak"
        v-if="canComment"
        :options="speakOptions"
        :visible.sync="isInTradeTime"
        @speaking="onNewMsg"></speak>
    </div>
    <!-- <div class="chat-bottom-wrap" ref='chat' v-show='allowChat'>
      <speak ref='speak' @speaking='append2Msgs' :options='entryData' @emojiVisible='onEmojiVisible'/>
    </div> -->
  </div>
</template>

<script>
import TeamHeader from './TeamHeader'
import Speak from 'components/game/comment/Speak'
import NewMsg from 'components/game/detail/NewMsg'
import GroupList from './GroupList'
import GamePwdInputModal from  'components/modal/GamePwdInputModal'
import LocalDAO from 'common/localDAO'
import RemoteDAO from 'common/remoteDAO'
import CommonUtil from 'common/common.util'
import { buryPoint, checkLogin } from 'common/decorator'
const Constant = require('common/constant')

const apiAddress = 'https://api.app.gtja.com/gt/nrng'
const pageSize = 20

const rankMap = {
  '1': '一',
  '2': '二',
  '3': '三',
  '4': '四'
}

export default {
  name: 'detail',
  data () {
    const { gameId = '', gameTitle = '', hasAttended = false } = this.$route.query

    return {
      gameId: gameId,
      // gameId: '201705210050005121452',
      gameTitle: gameTitle,
      isSpecial: gameTitle.includes('股林大会'),
      hasAttended: hasAttended === 'false' || !hasAttended ? false : true,
      teamDetail: {
        GAME_STEP: 0,
        GAME_ATTEND_PERSON: '-',
        BEGIN_DATE: ''
      },
      speakOptions: {
        userCode: localStorage.getItem('userCode'),
        userHead: LocalDAO.getUserHead(),
        nickName: LocalDAO.getNickname(),
        objectType: 4,
        topicCode: gameId,
        topicName: gameTitle,
        style: '#f2f2f2'
      },
      showTotal: true,
      totalPageNum: 1,
      weekPageNum: 1,
      rankList: [],
      myRankInfo: {},
      isAttend: false,
      hasChecked: false,
      isLogin: !!localStorage.getItem('userCode'),
      isRankLoading: false,
      isInTradeTime: true
    }

  },
  components: {
    TeamHeader,
    GroupList,
    GamePwdInputModal,
    NewMsg,
    Speak
    // NewComment
  },
  created () {
    // this.gameStep = 4
    this.getTeamDetail()
  },
  mounted () {
    TDAPP.onEvent('13033', "", { gameid: this.gameId })
    TDAPP.send()
    this.initRankList()
    this.getMyRank()
    // this.checkIfSign()
  },
  filters: {
    toFix (val,length = 2) {
      const symbol = Number(val).toFixed(length) >= 0 ? '+' : '-'
      return symbol + Math.abs(Number(val)).toFixed(length) + '%'
    }
  },
  methods: {
    teamInfoBg (index) {
      let teamInfoBg
      (teamInfoBg = index === 0 && `${require('assets/images/team/people@2x.png')}`) ||
      (teamInfoBg = index === 1 && `${require('assets/images/team/renqi@2x.png')}`) ||
      (teamInfoBg = index === 2 && `${require('assets/images/team/kongcang@2x.png')}`)
      return teamInfoBg
    },
    @checkLogin
    @buryPoint('17009', function() { return { gameid: this.gameId }})
    attendGame () {
      if (this.gameStep !== 3) return

      if (this.teamDetail.IS_GAMEPWD === '1'){
        this.$store.dispatch('setModal', { visible: true, modalId: 'gamePwdInputModal',gameId:this.gameId, createUser:this.teamDetail.CREATE_USER });
      } else {
        RemoteDAO.callUC12008304(
          localStorage.getItem('userCode'),
          this.gameId,
          '',
          this.teamDetail.CREATE_USER, resp => {
            if (resp.error === '0') {
              this.$store.dispatch('setTip', { text: '参赛成功！' })
              this.checkIfSign()
            } else {
              this.$store.dispatch('setTip', { text: resp.data })
            }
          })
      }
    },
    @checkLogin
    onComment () {
      // alert('alert')
      this.$router.push({path: '/game/comment', query: {
        topicCode: this.gameId,
        topicName: this.gameTitle,
        objectType: 4,
        identity: this.isAttend
          ? Constant.game.identity.PLAYER : Constant.game.identity.ONLOOKER,
        gameStep: this.gameStep
      }})
    },
    registerSuccess () {
      this.$store.dispatch('setTip', { text: '参赛成功' })
      this.$store.dispatch('setModal', { visible: false, moduleId: 'gamePwdInputModal' })
      this.checkIfSign()
    },
    gotoTrade () {
      this.$router.push({ path: '/trade/buyin', query: {
        gameId: this.gameId
      }})
    },
    gotoStock () {
      this.$router.push({ path: '/game/gameselfdetail', query: {
        gameId: this.gameId,
        gameName: this.gameTitle,
        teamName: this.teamDetail.GAME_NAME
      } })
    },
    getTeamDetail () {
      const { gameId = '' } = this.$route.query
      const { teamList = [] } = this.$store.state.team
      // const tmp = teamList[0]
      const tmp = teamList.find(t => t.GAME_ID === gameId)

      if (!!tmp) {
        this.teamDetail = tmp
        this.checkIfSign()
      } else {
        // fetch team detail
        RemoteDAO.callUC12008302({
          gameId: this.gameId,
          gameType: 'TDS',
          pageNum: '1',
          pageSize: '50'
        }, resp => {
          this.checkIfSign()
          this.teamDetail = resp.data.body[0]
          this.getOtherDetail()
        })
      }
    },
    // 获取人气、收益率等数据
    getOtherDetail () {
      RemoteDAO.getSubteamList({
        upGameId: this.teamDetail.UP_GAME_ID
        // upGameId: '201705210050005222'
      }, resp => {
        const { teamList = [] } = resp.data
        const teamChartList = teamList.map(t => JSON.parse(t))
        this.teamDetail = Object.assign({}, this.teamDetail, teamChartList.find(t =>
          t.gameId === this.teamDetail.GAME_ID))
      })
    },
    initRankList () {
      setTimeout(() => {
        if (this.rankList.length === 0) {
          this.totalPageNum = 1
          RemoteDAO.callHB003(localStorage.getItem('userCode'), this.gameId,
            pageSize, 1, this.gameStep, res => {
            this.totalPageNum = 2
            this.rankList = res.data.body
            if (res.data.body.length === 0) {
              this.$refs.grouplist.bottomAllLoaded()
            }
          })
        }
      },100)
    },
    @buryPoint('17010', function(){ return { gameid: this.gameId }} )
    showAllList () {
      this.$refs.tabBC.style.transform = 'translate3d(0, 0, 0)'
      this.totalPageNum = 1
      if (!this.showTotal) {
        this.isRankLoading = true
        this.showTotal = true
        this.$refs.grouplist.resetLoadMore()
        RemoteDAO.callHB003(localStorage.getItem('userCode'), this.gameId,
          pageSize, 1, this.gameStep, res => {
          this.totalPageNum = 2
          this.rankList = res.data.body
          this.isRankLoading = false
          if (res.data.body.length === 0) {
            this.$refs.grouplist.bottomAllLoaded()
          }
        })
      }
    },
    @buryPoint('17011', function(){ return { gameid: this.gameId }})
    showWeekList () {
      this.$refs.tabBC.style.transform = 'translate3d(100%, 0, 0)'
      this.weekPageNum = 1
      if (this.showTotal) {
        this.isRankLoading = true
        this.showTotal = false
        this.$refs.grouplist.resetLoadMore()
        $.ajax({
          method: 'GET',
          url: `${apiAddress}/getNrngSubteamUserList/${this.gameId}/1/${pageSize}`,
          dataType: 'json',
          success: resp => {
            console.info('week rank', resp.data.teamUserList)
            this.weekPageNum = this.weekPageNum + 1
            this.rankList = resp.data.teamUserList
              .map(item => JSON.parse(item))
            this.isRankLoading = false
            if (resp.data.teamUserList.length === 0) {
              this.$refs.grouplist.bottomAllLoaded()
            }
          }
        })
      }
    },
    showMoreList () {
      console.log('show more rank data')
      if (this.showTotal) {
        RemoteDAO.callHB003('', this.gameId,
          pageSize, this.totalPageNum, this.gameStep, res => {
            // 防止数据重复
            for (let i = 0;i < this.rankList.length; i++) {
              if (!!res.data.body.find(item =>
                item.USER_CODE === this.rankList[i].USER_CODE)) {
                return false
              }
            }
            this.totalPageNum = this.totalPageNum + 1
            this.rankList = this.rankList.concat(res.data.body)
            if (res.data.body.length === 0) {
              this.$refs.grouplist.bottomAllLoaded()
            } else {
              this.$refs.grouplist.bottomLoaded()
            }
          })
      } else {
        $.ajax({
          method: 'GET',
          url: `${apiAddress}/getNrngSubteamUserList/
            ${this.gameId}/${this.weekPageNum}/${pageSize}`,
          dataType: 'json',
          success: resp => {
            console.info('week rank', resp.data.teamUserList)
            this.weekPageNum = this.weekPageNum + 1
            this.rankList = this.rankList.concat(resp.data.teamUserList
              .map(item => JSON.parse(item)))
            if (resp.data.teamUserList.length === 0) {
              this.$refs.grouplist.bottomAllLoaded()
            } else {
              this.$refs.grouplist.bottomLoaded()
            }
          }
        })
      }
    },
    profitStyle (profit = '0.00') {
      return {
        color: parseFloat(profit).toFixed(2) >= 0 ? '#FF3333' : '#89CD4C'
      }
    },
    getMyRank () {
      RemoteDAO.callJCL11143(
        localStorage.getItem('userCode'),
        this.gameId, resp => {
          if (resp.error === '0') {
            this.myRankInfo = resp.data.body.record[0] || {}
          }
        })
    },
    checkIfSign () {
      RemoteDAO.callUC12008303({
        userCode: localStorage.getItem('userCode'),
        actionFlag: 1,
        pageSize: 20,
        pageNo: 1,
        gameID: this.gameId
      }, resp => {
        // 是否参加了比赛
        this.hasChecked = true
        this.isAttend = resp.data.body.length > 0
      })
    },
    onNewMsg (msg) {
      msg.DEFAULT_HEAD_INDEX = 1
      msg.USER_CODE = this.userCode
      msg.USER_HEAD = LocalDAO.getUserHead()
      msg.NICKNAME = LocalDAO.getNickname()
      switch(msg.type){
        case 1: //emoji
          msg.COMMUNITY_CONTENT = '<img class="emoji_item" src="'+ msg.path +'" />';
          break;
        default:
          msg.COMMUNITY_CONTENT = msg.text;
      }
      this.$refs.newMsg.pushMsg(msg)
    },
    onShare () {
      const usercode = localStorage.getItem('userCode')
      const pagename = 'teamgame.teamdetail'

      if (this.isSpecial) {
        this.onShareSpecial()
      } else {
        const shareContent = {
          teamDetail: this.teamDetail,
          myRankInfo: this.myRankInfo
        }
        const url = 'https://dl.app.gtja.com/yyz/data/api/niurenshare/share'

        const icon = "https://dl.app.gtja.com/nrng/shareimages/niuniu.jpg"
        const title = '牛人牛股团队赛开始啦'
        const content = `${this.teamDetail.GAME_NAME}正在奋战，等待大王你的救援`

        $.ajax({
          url: url,
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json;charset=UTF-8',
          data: JSON.stringify({
            usercode,
            type: pagename,
            content: JSON.stringify(shareContent)
          }),
          success: function (resp) {
            console.info('share-resp', resp)
            const shareUrl = 'https://dl.app.gtja.com/nrng/newShares/' +
              'team-game-inprogress.html?userCode=' + usercode +
              '&url=' + resp.url +
              '&title=' + title +
              '&content=' + content
            RemoteDAO.share(title, content, shareUrl, 'content', icon)
          },
          error: function (e) {
            alert('error:'+JSON.stringify(e));
          }
        })
      }
    },
    onShareSpecial () {
      const usercode = localStorage.getItem('userCode')
      const url = 'https://dl.app.gtja.com/yyz/data/api/niurenshare/share'

      const myRank = this.myRankInfo.ranknum > 0 ? this.myRankInfo.ranknum : '-'
      const icon = "https://dl.app.gtja.com/web/gulindahui/share/gulinshare.jpg"
      const title = `${this.teamDetail.GAME_NAME}目前排名第${this.teamDetail.avgProfitRank || '-'}`
      const content = `我排第${myRank}名，邀你加入，一起决战股林`

      console.log(title, content)
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify({
          usercode,
          type: 'teamgame.glteamdetail'
        }),
        success: function (resp) {
          console.info('share-resp', resp)
          const shareUrl = 'https://dl.app.gtja.com/nrng/newShares/gldh-game-award.html' +
              '?usercode=' + usercode +
              '&source=teamDetail' +
              '&title=' + title +
              '&content=' + content
          RemoteDAO.share(title, content, shareUrl, 'content', icon)
        }
      })
    },
    backToSquare () {
      $.ajax({
        url: 'https://dl.app.gtja.com/nrng/gldh/gldh.json',
        type: 'GET',
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'square',
        success: resp => {
          window.location.href = resp.path
        }
      })
    }
  },
  computed: {
    winBg () {
      if (this.gameStep === 4 && this.teamDetail.avgProfitRank === '1') {
        return `url(${require('assets/images/team/winwin@2x.png')})`
      } else {
        return
      }
    },
    gameStep () {
      return parseInt(this.teamDetail.GAME_STEP)
    },
    teamInfo () {
      const { GAME_ATTEND_PERSON, popularity = '-', shortRate = '0.0' } = this.teamDetail
      return [["已参赛人数", GAME_ATTEND_PERSON + '人'],
        ["人气值", popularity + '次'],
        ["空仓率", parseFloat(shortRate).toFixed(2) + '%']]
    },
    profitUpdateTime () {
      const avgProfitDays = JSON.parse(this.teamDetail.avgProfitDays || "[]")
      if (avgProfitDays.length === 0) {
        return '-'
      } else {
        const updateDay = avgProfitDays[avgProfitDays.length - 1]
        return updateDay.slice(0, 4) + '.' +
          updateDay.slice(4, 6) + '.' +
          updateDay.slice(6, 8)
      }
    },
    canComment () {
      return this.gameStep === 3 && this.isAttend && this.isInTradeTime
    },
    buttonText () {
      switch (this.gameStep) {
        case 0: return '比赛未开始'
        case 3: return '报名该队'
        case 4: return '比赛结束'
        default: return
      }
    }
  }
}
</script>

<style lang="less" scoped>
.flexLayout(@justify-content:center,@align-items:center){
  display: flex;
  justify-content: @justify-content;
  align-items: @align-items;
}
.ellipsis(@-webkit-line-clamp:1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @-webkit-line-clamp;
  -webkit-box-orient: vertical;
}


.detail {
  position: relative;
  background-color: #F7743A;
  .plq {
    position: fixed;
    right: 10px;
    bottom: 50px;
    z-index: 1;
  }
}
.countdown {
  text-align: center;
  margin-bottom: 6px;
  .time {
    width: 100%;
    margin-top: 6px;
    span {
      color: #FFF782;
      background-color: #98381E;
      border-radius: 5px;
      font-size: 18px;
      padding: 2px;
    }
    span.leaveDays {
      font-size: 14px;
      padding: 2px 4px;
    }
    span:nth-child(2) {
      position: relative;
      margin: 0 5px;
      &::before, &::after{
        content: ':';
        position: absolute;
        top: 5%;
        font-weight: 900;
        color: #98381E;
      }
      &::before {
        left: -6px;
      }
      &::after {
        right: -6px;
      }
    }
  }
}

.sign_up, .end {
  color: #A33815;
  background-color: #FFF005;
  width: 223px;
  border-radius: 19px;
  text-align: center;
  margin: 0 auto 20px;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 900;
}
.end {
  color: #BFBFBF;
  background-color: #6D6D6D;
  margin-top: 19px;
}
.applied {
  width: 100%;
}
.myRank {
  position: relative;
  height: 47px;
  background-image: repeating-linear-gradient(-50deg, #EE6C33, #EE6C33 12px,#F7743A 0, #F7743A 24px);
  .back_ground {
    position: absolute;
    top: 13px;
    right: 20px;
    padding:0 6px 0 10px;
    background-color: #E65222;
    border-radius: 11px;
    border: 1px solid #fff;
    color: #FFFCFA;
    i {
      font-size: 14px;
    }
  }
}
.myRank_con {
  position: absolute;
  margin-left: 50%;
  transform: translateX(-40%);
  height: 100%;
  p {
    margin-bottom: -4px;
    color: #FFE867;
    font-size: 20px;
    line-height: 32px;
  }
  span {
    color: #67220C;
    font-size: 12px;
  }
  &::before {
    content: '';
    position: absolute;
    background-image: url('../../assets/images/team/gou@2x.png');
    background-size: 100%;
    left: -42px;
    top: 5px;
    width: 38px;
    height: 38px;
  }
}
.dealAndStock {
  width: 90%;
  margin: 0 auto;
  padding: 4px;
  background-color: #E15F25;
  border-radius: 15px;
  font-size: 16px;
  font-weight: 900;
  margin-top: 20px;
  margin-bottom: 20px;
  .flexLayout(space-between);
  .gaming {
    width: 48%;
    background-color: #FFF005;
    color: #A33815;
    height: 38px;
    .flexLayout();
    border-radius: 10px;
  }
  // .game_over {
  //   width: 48%;
  //   background-color: #6D6D6D;
  //   color: #BFBFBF;
  //   height: 38px;
  //   .flexLayout();
  //   border-radius: 10px;
  // }
  .stock {
    width: 48%;
    height: 38px;
    background-color: #fff;
    color: #938CAC;
    .flexLayout();
    border-radius: 10px;
  }
}
.group_con {
  padding: 11px 20px 20px 16px;
  color: #fff;
  background-repeat: no-repeat;
  background-position: 35% top;
  background-size: 200px 100px;
}
.con_top {
  .flexLayout(space-between);
  position: relative;
  min-height: 80px;
  .group_name {
    width: 40%;
    font-size: 21px;
    text-align: left;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
  }
  .group_earnings {
    text-align: center;
    width: 40%;
    p:nth-of-type(1) {
      width: 90%;
      margin:0 auto 5px;
      background-color: #fff;
      color: #FF3333;
      font-size: 20px;
      font-weight: 900;
      border-radius: 13px;
    }
    p:nth-of-type(2){
      margin: 0;
      font-size: 12px;
    }
    p:nth-of-type(3) {
      font-size: 12px;
      @media screen {
        @media (max-width: 330px) {
          width: 110%;
          text-indent: -3px;
          text-align: left;
        }
        @media (min-width: 331px) {
          width: 100%;
        }
      }
      transform: scale(0.9);
      color: #FFF7C3;
    }
  }
  &::before {
    content:'';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px; /*no*/
    width: 100%;
    background-image: linear-gradient(to right, transparent 50%, rgb(200,200,200) 0);
    background-size: 5px 100%; /*no*/
  }
}
.con_bot {
  padding-top: 20px;
}
.group_detail {
  .flexLayout(space-around);
}
.detail_list {
  .flexLayout(center);
  flex-basis: 33.33%;
  div {
    margin-left: 4px;
    p:nth-of-type(1){
      // font-size: 12px;
      margin-bottom: 0;
      @media screen {
        @media (max-width: 400px) {
          font-size: 12px;/*no*/
        }
        @media (min-width: 400px) {
          font-size: 14px;/*no*/
        }
      }
    }
    p:nth-of-type(2){
      // font-size: 14px;
      // font-weight: 900;
      margin: 0;
      .ellipsis(1);
      @media screen {
        @media (max-width: 400px) {
          font-size: 14px;/*no*/
          line-height: 22px;
        }
        @media (min-width: 400px) {
          font-size: 16px;/*no*/
          line-height: 24px;
        }
      }
    }
  }
  img {
    width: 27px;
    height: 27px;
  }
}
.tab_wrap {
  width: 100%;
  height: 87px;
  box-sizing: border-box;
  padding: 17px 38px 41px 38px;
  background: #fff;
}

.hint {
  text-align: center;
  font-size: 12px;
  color: #F7743A;
  margin-top: 15px;
}

.tab {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #926969;
  text-align: center;
  border-radius: 16px;
  font-size: 12px;
  position: relative;
  span {
    position: absolute;
    z-index: 10;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    .flexLayout();
    background-color: transparent;
  }
  span:nth-child(2) {
    left: 50%;
  }
}
.tab_background {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
  background-color: #F7743A;
  width: 50%;
  height: 100%;
  transition: all 0.3s ease;
  &::before {
    position: absolute;
    bottom: -8px;
    left: 45%;
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #F7743A;
  }
}

.comment-icon {
  position: fixed;
  // z-index: 999999;
  width: 15%;
  bottom: 50px;
  right: 10px;
}

.comment-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 20;
}

.skeleton {
  background-color: #F7743A;
  height: 100px;
  text-align: center;

  img {
    width: 20%;
  }
}
// .chat-bottom-wrap{
//   position: fixed;
//   bottom: 0;
//   width: 100%;
//   background: #fff;
//   border-radius: 5px;
// }

</style>
